<template>
  <div>
    <!-- data:  表格的数据 -->
    <!-- row-key: 选择表格元素 -->
    <!-- default-expand-all: 默认展开所有子集 -->
    <!-- tree-props: 树形数据的配置项 -->
    <el-table
      :data="tableData"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
      border
      stripe
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
    <!-- sortable: 排序 -->
      <el-table-column prop="id" label="ID" sortable  width="auto" align='center'>
      </el-table-column>
      <el-table-column prop="title" label="标题"  width="auto" align='center'>
      </el-table-column>
      <el-table-column prop="type" label="类型" width="auto" align='center'> 
        <!-- 作用域插槽  添加节点需要使用  作用域插槽 -->
         <template slot-scope="scope">
           <el-tag v-if="scope.row.type == 1" type="success">目录</el-tag>
           <el-tag v-else type="danger">菜单</el-tag>
        </template>
      </el-table-column>
    
      <el-table-column prop="icon" label="图标" width="auto" align='center'> 
        <template slot-scope="scope">
          <i v-if="scope.row.icon" :class="scope.row.icon"></i>
        </template>
      </el-table-column>
    
      <el-table-column prop="address" label="地址" width="auto" align='center'> </el-table-column>
  
      <el-table-column prop="status" label="状态" width="auto" align='center'>
         <template slot-scope="scope">
          <el-tag v-if="scope.row.status == 1" type="success">已启用</el-tag>
           <el-tag v-else type="danger">未启用</el-tag>
        </template>
      </el-table-column>
    
      <el-table-column label="操作" width="150" align='center'>
        <template slot-scope="scope">
        <el-button
          class="btn2"
          icon='el-icon-edit'
          type='success'
          @click="edit(scope.row)"></el-button>
        <el-button
          type="danger"
          icon='el-icon-delete'
          class="btn2"
          cirle
          @click="del(scope.row.id)"></el-button>
      </template>
      </el-table-column>
    </el-table>

    <!-- <el-table
    :data="myList"
    border
    style="width: auto">
    <el-table-column
      fixed
      prop="id"
      label="ID"
      width="auto"
      align='center'
       type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
          <el-form-item label="商品名称">
            <span>{{ props.row.name }}</span>
          </el-form-item>
          <el-form-item label="所属店铺">
            <span>{{ props.row.shop }}</span>
          </el-form-item>
          <el-form-item label="商品 ID">
            <span>{{ props.row.id }}</span>
          </el-form-item>
          <el-form-item label="店铺 ID">
            <span>{{ props.row.shopId }}</span>
          </el-form-item>
          <el-form-item label="商品分类">
            <span>{{ props.row.category }}</span>
          </el-form-item>
          <el-form-item label="店铺地址">
            <span>{{ props.row.address }}</span>
          </el-form-item>
          <el-form-item label="商品描述">
            <span>{{ props.row.desc }}</span>
          </el-form-item>
        </el-form>
      </template>
    </el-table-column>
    <el-table-column
      prop="title"
      label="标题"
      width="auto"
      align='center'>
    </el-table-column>
    <el-table-column
      prop="type"
      label="类型"
      width="auto"
      align='center'>
      <template slot-scope="scope">
        <el-button class="green">{{scope.row.type}}</el-button>
      </template>
    </el-table-column>

    <el-table-column
      label="图标"
      width="auto"
      align='center'
      >
    <template slot-scope="scope">
      <i :class='scope.row.icon'></i>
    </template>

    </el-table-column>
    <el-table-column
      prop="address"
      label="地址"
     width="auto"
      align='center'>
    </el-table-column>
    <el-table-column
      prop="status"
      label="状态"
      width="auto"
      align='center'>
       <template slot-scope="scope">
        <el-button class="green">{{scope.row.status}}</el-button>
      </template>
    </el-table-column>
    <el-table-column
      label="操作"
      width="auto"
      align='center'>
      <template slot-scope="scope">
        <el-button class="btn2" type='success'   size="small" icon='el-icon-edit' @click="fn(scope)"></el-button>
        
          <el-button slot="reference" class="btn2" type="danger" size="small" icon='el-icon-delete' @click="del"></el-button>
      </template>
    </el-table-column>

  </el-table> -->
  </div>
</template>

<script>
// 引入

import {getMenuListApi, delMenuApi} from '../../api'
export default {
  data() {
    return {
      tableData:[]
    };
  },
  created(){
      // 发请求,
      this.getMenuList();
  },
  computed: {

  },
  methods: {
    del(id) {
      this.$confirm("此操作将永久删除该内容, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        // title:'哈哈'
      })
        .then(() => { // 点击确认按钮
        // 执行删除函数
          this.delItem(id);
        })
        .catch(() => {
          this.$message({ // 点击取消按钮
            type: "info",
            message: "已取消删除",
          });
        });
    },
    async getMenuList(){
      let res = await getMenuListApi();
      this.tableData = res.list
    },
    // 删除
    async delItem(id) {
      // 请求删除接口(api)
      let res = await delMenuApi(id);
      console.log(res);
      if(res.code == 200){
        // 200 表示删除操作成功
        this.$message({
          type: "success",
          message: "删除成功!",
        });
        console.log(res);
        this.tableData = res.list;
      }else{
        this.$message({
          type: "warning",
          message: res.msg,
        });
      }
    },
    edit(info){
      // console.log('list中的info',info);
      // 将数据传给父组件
      this.$emit('edit',info)
    }





  },
};
</script>

<style>
.el-button.btn2 {
  padding: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 5px;
}
.green {
  color: green;
}
</style>